<template>
  <div class="myself-container">
    <div class="header">
      <el-button type="text"></el-button>

      <div>个人中心</div>

      <van-icon name="scan" color="#1989fa" />
    </div>

    <div class="user-info">
      <img style="width: 60px; height: 60px" :src="userImg" alt="" />
      <span>shopping-vue</span>
    </div>

    <van-cell
      title="我的订单"
      style="margin-top: 10px"
      is-link
      value="全部订单"
    />

    <div class="icon-list">
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>待付款</span>
      </div>
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>代发货</span>
      </div>
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>待收货</span>
      </div>
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>已完成</span>
      </div>
    </div>

    <van-cell
      title="我的优惠券"
      style="margin-top: 10px"
      is-link
      value="全部优惠券"
    />

    <div class="icon-list">
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>待使用</span>
      </div>
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>已使用</span>
      </div>
      <div class="icon-list-item">
        <van-icon name="coupon-o"></van-icon>
        <span>过期关闭</span>
      </div>
    </div>

    <van-cell
      title="我的收藏"
      style="margin-top: 10px"
      is-link
      icon="location-o"
    />
    <van-cell title="收货地址" is-link icon="location-o" />
    <van-cell title="服务中心" is-link icon="location-o" />
  </div>
</template>

<script>
export default {
  name: "myself",
  data() {
    return {
      userImg: require("../assets/images/User.png"),
    };
  },
};
</script>

<style lang="scss" scoped>
.myself-container {
  background: #ddd;
}
.header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  background-image: url("../assets/images/user_head_bg.38dfa566.png");
  background-size: 100% 100%;
  color: #fff;
}

.icon-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #fff;

  .icon-list-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .van-icon {
      font-size: 25px;
    }

    > span {
      font-size: 12px;
    }
  }
}
</style>
